<template>
	<view class="container">
		<view class="tit v-center" v-if="isWithDraw">本月提现申请已提交，请下个月再提交申请。</view>
		<view class="tit v-center" v-if="isAudit">提现银行信息集团审核中，通过后才能提现</view>
		<view class="cont">
			<view class="wei" v-if="!isBand">
				<view class="tit1">暂未绑定银行卡</view>
				<view class="add center" @click="goPage">
					<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/add.png" mode="widthFix" class="add-img"></image> 
					点我绑定提现银行卡</view>
			</view>
			<view class="wei" v-if="isBand">
				<view class="tit1">提现到银行卡</view>
				<view class="bank">
					<view class="who">{{userInfo.bankAcc}} <text class="what">{{userInfo.bankName}}</text></view>
					<view class="num">{{userInfo.bankNo}}</view>
				</view>
			</view>
			<view class="money-box">
				<view class="tit1">提现金额</view>
				<view class="v-center w-box">
					<view class="unit">￥</view>
					<input type="digit" v-if="isBand && !isWithDraw && !isAudit" v-model="num" class="input" />
				</view>
				<view class="ts">
					待提现佣金￥{{userInfo.price}}，
					<text class="not" :class="{'all': isBand && !isWithDraw && !isAudit}" @click="all">全部提现</text>
				</view>
			</view>
			<view class="tit2">
				温馨提示：<br>
				1、每月每个用户可提交一次提现申请；<br>
				2、富侨会会集中每月20号处理20号之前提交打申请，节假日顺延20号及之后的申请在下个月一并处理；<br>
				3、可以通过提现记录查看提现申请处理进度；<br>
				4、提现申请发起后不支持取消。<br>
			</view>
		</view>
		<view class="bottom center" @click="sure" v-if="isBand && !isWithDraw && !isAudit">
			<view class="center btn">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		withDraw,
		withDrawList
	} from '../../api/active.js'
	export default {
		data() {
			return {
				isWithDraw: false,
				num: '',
				userInfo: '',
				isBand: false,
				isAudit: false,
			};
		},
		onShow() {
			getUserInfo({userId: uni.getStorageSync("userId")}).then(res=>{
				this.userInfo = res.data
				if(res.data.bankAuth && res.data.bankAuth.status == 1) {
					this.isAudit = true
				}
				if(res.data.bankAcc && res.data.bankAcc && res.data.bankAcc) {
					this.isBand = true
				}
			})
		},
		onLoad() {
			this.getList()
		},
		methods: {
			all() {
				if(!this.isBand) return false;
				this.num = this.userInfo.price
			},
			goPage() {
				uni.navigateTo({
					url: '/pages/bank/bank'
				})
			},
			getList() {
				withDrawList({staffId:uni.getStorageSync("userId")}).then(res=>{
					if(res.data.records.length) {
						const timestamp = res.data.records[0].createTime;
						const date = new Date(timestamp);
						const currentDate = new Date();
						this.isWithDraw = date.getMonth() === currentDate.getMonth()
					}
				})
			},
			sure() {
				if(!this.num) return uni.showToast({
					title: '请输入提现金额',
					icon: 'none'
				})
				if(this.num > this.userInfo.price) return uni.showToast({
					title: '余额不足',
					icon: 'none'
				})
				let number = this.userInfo.bankNo;
				let str = number.toString(); // 将数字转换为字符串
				let lastFour = str.slice(-4);
				uni.showModal({
					title: "提现确认",
					content: `确认申请提现${this.num}元到${this.userInfo.bankName}(${lastFour}) 发起申请后不支持取消。`,
					success: res => {
						if (res.confirm) {
							withDraw({
								price: this.num,
								userId: uni.getStorageSync("userId")
							}).then(()=>{
								uni.showToast({
									title: '申请提现成功',
									icon: 'none',
									duration: 1500
								})
								setTimeout(()=>{
									uni.navigateBack()
								},1500)
							})
						} else if (res.cancel) {
							console.log("用户点击取消")
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 130rpx;
		background: #FFFFFF;
	
		.btn {
			width: 690rpx;
			height: 90rpx;
			background: #005097;
			border-radius: 45rpx;
			font-weight: 800;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
	.container {
		width: 100vw;
		min-height: 100vh;
		background: #F5F5F5;
	}

	.tit {
		width: 100%;
		height: 70rpx;
		background: #F7E6C5;
		font-weight: 500;
		font-size: 30rpx;
		color: #8A6625;
		padding-left: 50rpx;
	}

	.cont {
		padding: 20rpx 24rpx 0 24rpx;
	}

	.tit1 {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		padding-left: 25rpx;
	}

	.wei {
		width: 100%;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding-top: 37rpx;

		.add {
			font-weight: 500;
			font-size: 32rpx;
			color: #005097;
			margin-top: 55rpx;
			gap: 4rpx;
		}
		.bank {
			margin-top: 30rpx;
			padding-left: 25rpx;
		}
		.who {
			font-weight: 800;
			font-size: 28rpx;
			color: #333333;
			.what {
				font-weight: 500;
				color: #999999;
				font-size: 26rpx;
				padding-left: 10rpx;
			}
		}
		.num {
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
		}
	}

	.money-box {
		width: 100%;
		height: 283rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding-top: 37rpx;
		margin-top: 20rpx;
	}

	.w-box {
		width: 648rpx;
		border-bottom: 2rpx solid #E9E9E9;
		padding-bottom: 10rpx;
		margin-top: 38rpx;
		padding-left: 24rpx;
		.unit {
			font-weight: 800;
			font-size: 60rpx;
			color: #999999; // 没有提现机会显示的颜色
			// color: #333333; // 有提现机会显示的颜色
		}

		.input {
			font-size: 40rpx;
			color: #333333;
			margin-left: 10rpx;
		}
	}
	.ts {
		padding-left: 24rpx;
		margin-top: 26rpx;
		font-weight: 500;
		font-size: 20rpx;
		color: #999999;
		.not {
			color: #999;
		}
		.all {
			color: #005097;
		}
	}
	.tit2 {
		margin-top: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		line-height: 40rpx;
	}
	.add-img {
		width: 28rpx;
	}
</style>